import { TagField } from '@/pages/OrderModule/common/bizcomponents/TagField';
import { CommonForm } from '@/pages/OrderModule/common/components/CommonForm';
import { CommonModal } from '@/pages/OrderModule/common/components/CommonModal';
import {Button, Form, Space} from 'antd';
import React, { useMemo, useState, useEffect } from 'react';
import FilterType from './FilterType';
import Style from '@/pages/OrderModule/orderList/components/OrderList/index.module.less';
import styles from '@/pages/OrderModule/orderList/components/Actions/common/SetOrderLabelModal/index.module.less';
import {TagOutlined} from '@ant-design/icons';
import SetTag from '@/components/SelectTag/SetTag.jsx';
import CommonLoading from '@/components/CommonLoading/index.jsx';
import {queryTagList} from '@/pages/OrderModule/orderList/services.js';

/**
 * 包含标签弹窗
 * @param {*} props
 * @returns
 */
const IncludeTagModal = (props) => {
  const { visible, onVisibleChange, onChange, value = {} } = props;
  const [form] = Form.useForm();

  const [tagVisible, setTagVisible] = useState(false);
  const [commitSearch, setCommitSearch] = useState(()=>{
    if(value.isLabelOr == null){
      return { ...value, isLabelOr: true}
    }else{
      return value;
    }
  });
  const [tagList, setTagList] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if(visible) {
      form.setFieldValue('containLabelIdArr', value?.containLabelIdArr);
    }
  }, [visible]);

  const triggerChange = (changedValue) => {
    onChange?.({ ...value, ...changedValue });
  };
    const labelColorMap = {
        red: "红色标",
        blue: "蓝色标",
        yellow: "黄色标",
        purple: "紫色标",
        black: "黑色标"
    }
  const includeTagText = useMemo(() => {
    const connector = commitSearch?.isLabelOr === true ? ',' : '&';
    if (commitSearch?.containLabelIdArr?.length > 0) {
      return tagList
        .filter((item) => commitSearch?.containLabelIdArr?.includes(item.id))
        .map((item) => (labelColorMap[item.name] || item.name))
        .join(connector);
    } else {
      return '';
    }
  }, [tagList, commitSearch]);

    //获取标签列表
    const getTagList = async () => {
        setLoading(true);
        const { success, data } = await queryTagList();
        setLoading(false);
        if (success) {
            setTagList(data);
        }
    };
    //维护自定义标签弹框
    const SetTagProps = {
        handleCancel() {
            setTagVisible(false);
            getTagList();
        }
    };

  const initialValues = commitSearch;

  return (
    <CommonModal
      width={840}
      title={{
        title: '包含标签',
      }}
      open={visible}
      onCancel={(e) => {
          onVisibleChange?.(false);
          setCommitSearch(value);
          form.setFieldValue('containLabelIdArr', value?.containLabelIdArr);
          form.setFieldValue('isLabelOr', value?.isLabelOr);
      }}
      footer={
          <div className={styles.footer}>
              <div className={styles.operaWrap} onClick={() => setTagVisible(true)}>
                  <TagOutlined className={styles.operaIcon} />
                  维护自定义标签
              </div>
              <div>
                  <Button onClick={(e) => {
                      onVisibleChange?.(false);
                      setCommitSearch(value);
                      form.setFieldValue('containLabelIdArr', value?.containLabelIdArr);
                      form.setFieldValue('isLabelOr', value?.isLabelOr);
                  }}>取消</Button>
                  <Button type="primary" onClick={(e) => {
                      onVisibleChange?.(false);
                      triggerChange?.({ ...commitSearch, includeTagText });
                  }}>
                      保存
                  </Button>
              </div>
          </div>
      }
    >
      <CommonForm
        formProps={{
          onValuesChange(changedValues, values) {
            setCommitSearch(values);
          },
          form,
          initialValues,
        }}
        columns={[
          {
            slot: <FilterType />,
          },
          {
            slot: <TagField filterable={true} setTagList={setTagList} fieldKey={'containLabelIdArr'} />,
          },
        ]}
      />
        <CommonLoading loading={loading} />
        {tagVisible && <SetTag {...SetTagProps} />}
    </CommonModal>
  );
};
export default IncludeTagModal;
